@import '../../../../common/_utils/style/mixins/mixins.scss';
@import '../../../../common/_utils/style/theme/theme.scss';
@import '../../../../common/checkbox/style/checkbox.scss';

@include b(map-switch) {
  $map-switch-prefix: &;

  @include e(panel) {
    @include e(layers-wrap) {
      padding: 16px 16px 4px;
      overflow: hidden;

      @include e(layers) {
        overflow: hidden;
        margin-bottom: 17px;
        .layer-item {
          width: 64px;
          height: 64px;
          border-radius: 2px;
          position: relative;
          margin-right: 8px;
          float: left;
          background: url('#{$--tdt-assets-path}/sprite.png') no-repeat;
          cursor: pointer;
          border: 1px solid transparent;
          &:hover {
            border-color: $hover-color;
          }
          &.map-item {
            background-position: -240px -53px;
          }
          &.image-item {
            background-position: -6px -53px;
          }
          &.landform-item {
            background-position: -84px -53px;
          }
          &.threed-item {
            background-position: -162px -51px;
          }
          &:last-of-type {
            margin-right: 0;
          }
          &.active-item {
            #{$map-switch-prefix}__layer-name {
              background: $primary-color;
            }
          }

          img {
            width: 100%;
            height: 100%;
          }

          @include e(layer-name) {
            position: absolute;
            bottom: -1px;
            width: 64px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            z-index: 10;
            background: $tdt-map-switcher-layer-name-bg;
            box-sizing: content-box;
            color: $white;
          }
        }
      }

      @include e(labelSetting) {
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid $border-color-split;
      }
      .sm-component-checkbox-wrapper {
        color: inherit;
      }
    }
  }
}
